import React, { Component, Fragment } from 'react';
import { withRouter } from 'react-router-dom'
import { SearchBar } from 'antd-mobile';
import Title from '../Title'

class Header extends Component {
    state = {
        value: '美食',
        picSign: true,//控制顶部图片
        searchFlag: true,//控制搜索框
        titleFlag: true,//控制头部标题
        title: {
            title_cont: null,//头部标题字
            setting_cont: null,//编辑字
            settingFlag: null,//控制
            titleFlag: null,
            backFlag: null,//返回箭头
            moreFlag: null,//更多的三个点
            searchFlag: null,//搜索框
        }

    };
    setTitle = ({
        titleName = "购物车",
        setName = "编辑",
        settingFlag = false,
        titleFlag = true,
        backFlag = true,
        moreFlag = false,
        searchFlag = false
    }) => {
        const obj = {}
        obj.title_cont = titleName
        obj.setting_cont = setName
        obj.settingFlag = settingFlag
        obj.titleFlag = titleFlag
        obj.backFlag = backFlag
        obj.moreFlag = moreFlag
        obj.searchFlag = searchFlag
        this.setState({
            title: obj
        })
    }
    componentWillReceiveProps(nextProps) {
        const { pathname } = nextProps.location
        switch (pathname) {
            case '/shopcar':
                this.setTitle({
                    settingFlag: true,
                    backFlag:false
                })
                this.setState({
                    picSign: false,
                    searchFlag: false,
                    titleFlag: true,
                })
            break;
            case '/home' :
                this.setState({
                    picSign: true,
                    searchFlag: true,
                    titleFlag: false,
                })
            break;
            case '/mine' :  
                this.setState({
                    picSign: false,
                    searchFlag: false,
                    titleFlag: false,
                })
            break;
            case '/classify' :
                this.setState({
                    picSign: false,
                    searchFlag: true,
                    titleFlag: false,
                })
            break;
            case '/details' :
                this.setState({
                    picSign:false,
                    searchFlag:false,
                    titleFlag:false
                })
            break;
        }
    }

    componentDidMount() {
        const { pathname } = this.props.location
        switch (pathname) {
            case '/shopcar':
                this.setTitle({
                    settingFlag: true,
                    backFlag:false
                })
                this.setState({
                    picSign: false,
                    searchFlag: false,
                })
            break;
            case '/home' :
                this.setState({
                    picSign: true,
                    searchFlag: true,
                    titleFlag: false,
                })
            break;
            case '/mine' :
                this.setState({
                    picSign: false,
                    searchFlag: false,
                    titleFlag: false,
                })
            break;
            case '/classify':
                this.setState({
                    picSign: false,
                    searchFlag: true,
                    titleFlag: false,
                })
            break;
            case '/details' :
                this.setTitle({
                    titleFlag : false,
                    backFlag : false,
                    moreFlag : true,
                    searchFlag : false,
                    settingFlag : false
                })
                this.setState({
                    picSign:false,
                    searchFlag:false,
                    titleFlag:false,
                    moreFlag:true
                })
            break;
        }
      };
    render() {
        const {searchFlag , titleFlag , title}=this.state
        return (
            <Fragment>
                    { searchFlag &&  <SearchBar
                        value={this.state.value}
                        placeholder="Search"
                        onSubmit={value => console.log(value, 'onSubmit')}
                        onClear={value => console.log(value, 'onClear')}
                        onFocus={() => console.log('onFocus')}
                        onBlur={() => console.log('onBlur')}
                        onCancel={() => console.log('onCancel')}
                        showCancelButton
                        onChange={this.onChange}
                    />} 
                    { titleFlag && <Title {...title}/> }       
            </Fragment>
        );
    }
}

export default withRouter(Header);